<template>
  <div class="hello">
    <header>
      <h1 class="logo">
        <img src="../assets/logo.png" alt="" />
      </h1>
      <ul class="nav" ref="navPopup">
        <li
          v-for="(item, i) in navArr"
          @click="navClick(i)"
          :key="i"
          :class="{ active: currentIndex == i }"
        >
          {{ item }}
        </li>
      </ul>
    </header>
    <div class="select1" v-if="currentIndex == 0">
      <slide @change='slideChange'></slide>
      <cont :data='cont'></cont>
    </div>
    <div class="select2" v-if="currentIndex == 1">流量计vc</div>
    <!-- 底部 -->
    <footer>
      <div class="bottom">
        <div class="t1">联系方式</div>
        <div class="t2">
          <img src="../assets/img/phone.png" alt="" />
          <span>18964509181</span>
        </div>
        <div class="t2">
          <img src="../assets/img/position.png" alt="" />
          <span>上海市浦东新区周康路26号1610室</span>
        </div>
        <div class="t3">
          <span
            style="cursor: pointer"
            onclick="location.href='https://beian.miit.gov.cn'"
            >沪ICP备 2021019086号</span
          >
          <span class="s2">©️ 2021 上海唐兴进出口贸易有限公司</span>
        </div>
      </div>
    </footer>
    <div class="service">
      <div class="t1 wx" @click="wxClick">
        <i class="iconfont icon-weixin"></i>
        <div class="code" ref="code">
          <img src="../assets/img/wx.jpg" alt="" />
        </div>
      </div>
      <div class="t1 qq" @click="qqClick">
        <i class="iconfont icon-10"></i>
        <a ref="qq" :href="href" class="add-qq">
          <img src="../assets/img/qq.jpg" alt="" />
          <span>加客服</span>
        </a>
      </div>
      <div class="t1 backTop" @click="backTop">
        <i class="iconfont icon-icon"></i>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@media screen and (min-width: 1001px) {
  .hello {
    .bx {
      margin: 0 auto;
      max-width: 1200px;
    }
    header {
      height: 100px;
      display: flex;
      align-items: center;
      padding: 7px 300px 0;
      background: #fff;
      box-shadow: 0px 7px 17px 1px rgba(50, 50, 50, 0.05);
      .menu {
        display: none;
      }
      .logo {
        img {
          width: 150px;
        }
      }
      .nav {
        display: flex;
        width: 606px;
        align-items: center;
        li {
          position: relative;
          font-weight: bold;
          font-size: 18px;
          color: #4c4c4c;
          margin-left: 70px;
        }
        li.active {
          position: relative;
          font-weight: bold;
          font-size: 18px;
        }
        .active::before {
          content: '';
          position: absolute;
          top: 30px;
          left: 50%;
          transform: translateX(-50%);
          width: 41px;
          height: 8px;
          background: #ffad42;
          border-radius: 4px;
        }
      }
    }
    .select1{
      display: flex;
      .slide{
        margin-top: 100px;
      }
      .cont{
        margin-bottom: 30px;
      }
      .title{
        height: 50px;
        line-height: 50px;
      }
    }
    footer {
      background: url('../assets/img/footer2.png');
      color: #fff;
      margin-top: -2px;
      .top {
        padding: 30px 360px;
        border-bottom: 1px solid #3a393a;
        .t1 {
          padding: 0 0 10px 0;
        }
        .t2 {
          display: flex;
          align-items: center;
          flex-flow: wrap;
          div {
            margin-right: 60px;
            line-height: 40px;
          }
        }
      }
      .center {
        padding: 30px 360px;
        border-bottom: 1px solid #3a393a;
        display: flex;
        justify-content: space-between;
        li {
          line-height: 34px;

          .tt {
            font-size: 18px;
            font-weight: bold;
          }
          p {
            font-size: 14px;
          }
        }
      }
      .bottom {
        padding: 30px 360px;
        border-bottom: 1px solid #3a393a;
        .t1 {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .t2 {
          line-height: 36px;
          font-size: 14px;
          img {
            margin-right: 6px;
          }
        }
        .t3 {
          margin-top: 20px;

          font-size: 14px;
          .s2 {
            margin-left: 100px;
          }
        }
      }
    }
    .service {
    position: fixed;
    right: 0;
    bottom: 140px;
    .t1 {
      width: 52px;
      height: 52px;
      line-height: 52px;
      margin-top: 1px;
      text-align: center;
      background: #feb65b;
      i {
        font-size: 34px;
        color: #fff;
      }
    }
    .t1:hover {
      background: #f3941c;
    }
    .code {
      position: absolute;
      display: none;
      right: 52px;
      top: -100px;
      border: 1px solid orange;
      img {
        width: 200px;
      }
    }
    .wx:hover > .code {
      display: block;
    }
    .add-qq {
      position: absolute;
      right: -150px;
      z-index: -1;
      top: 54px;
      transition: all 0.5s;
      border: 1px solid orange;
      background: #fff;
      display: flex;
      align-items: center;
      height: 52px;
      width: 200px;
      img {
        margin: 0 10px;
        width: 40px;
      }
      a {
        text-decoration: none;
        color: orange;
      }
    }
    .qq:hover > .add-qq {
      right: 52px;
    }
  }
  }
}
</style>
<script>
import Cont from './cont.vue'
import Slide from './slide.vue'
export default {
  name: 'hello',
  components:{Slide, Cont},
  data() {
    return {
      bool: false,
      navArr: ['输送泵', '流量计vc'],
      currentIndex: 0,
      cont:{id:0,title:'齿轮输送泵KF'},
      href: 'tencent://message/?uin=2162934130&Site=在线QQ&Menu=yes',
    }
  },
  created() {
    var flag = this.IsPC() //true为PC端，false为手机端
    this.href = flag
      ? 'tencent://message/?uin=2162934130&Site=在线QQ&Menu=yes'
      : 'mqqwpa://im/chat?chat_type=wpa&uin=2162934130&version=1&src_type=web&web_src=oicqzone.com'
  },
  methods: {
    navClick(i) {
      this.currentIndex = i
    },
    slideChange(data){
      this.cont=data
    },
     backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
        bool: false,
        bool2: false,
      })
    },
    wxClick() {
      this.bool = !this.bool
      this.$refs.code.style.display = this.bool ? 'block' : 'none'
    },
    qqClick() {
      this.bool2 = !this.bool2
      this.$refs.qq.style.right = this.bool2 ? '52px' : '-150px'
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent
      var Agents = [
        'Android',
        'iPhone',
        'SymbianOS',
        'Windows Phone',
        'iPad',
        'iPod',
      ]
      var flag = true
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false
          break
        }
      }
      return flag
    },
  },
}
</script>
